<template>
  <Layout style="height: 100%" class="main">
    <Sider hide-trigger collapsible :width="210" :collapsed-width="64" v-model="collapsed">
      <side-menu accordion :active-name="$route.name" :collapsed="collapsed" :menu-list="menuList">
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
        <div class="logo-con">
          <img v-show="!collapsed" :src="maxLogo" key="max-logo" />
          <img v-show="collapsed" :src="minLogo" key="min-logo" />
        </div>
      </side-menu>
    </Sider>
    <Layout>
      <Header class="header-con">
        <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
          <user :user-avator="minLogo"/>
        </header-bar>
      </Header>
      <!-- <Content>
        <Layout>
          <div class="tag-nav-wrapper">
            <tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag"/>
          </div>
          <Content>
            <keep-alive :include="cacheList">
              <router-view/>
            </keep-alive>
          </Content>
        </Layout>
      </Content> -->
    </Layout>
  </Layout>
</template>
<script>
import sideMenu from './components/side-menu/side-menu'
import headerBar from './components/header-bar/header-bar'
import user from './components/user/user'
import minLogo from '@/assets/images/logo-min.jpg'
import maxLogo from '@/assets/images/logo.jpg'
// import userAvator from '@/assets/images/logo-min.jpg'
export default {
  name: 'home',
  data () {
    return {
      collapsed: false,
      minLogo,
      maxLogo
    }
  },
  methods: {
    handleCollapsedChange (state) {
      this.collapsed = state
    }
  },
  components: {
    sideMenu,
    headerBar,
    user
  },
  computed: {
    // userAvator () {
    //   return 'ios-person'
    // },
    menuList () {
      return [
        {
          name: 'menu',
          icon: 'ios-book'
        },
        {
          name: 'menu1',
          icon: 'ios-add',
          children: [
            {
              name: 'menu1-1',
              icon: 'ios-book',
              children: [
                {
                  name: 'menu1-1-1',
                  icon: 'ios-add'
                },
                {
                  name: 'menu1-2-1',
                  icon: 'ios-book'
                }
              ]
            },
            {
              name: 'menu1-2',
              icon: 'ios-book'
            }
          ]
        },
        {
          name: 'menu2',
          icon: 'ios-add',
          children: [
            {
              name: 'menu2-1',
              icon: 'ios-book'
            },
            {
              name: 'menu2-2',
              icon: 'ios-add'
            }
          ]
        },
        {
          name: 'menu3',
          icon: 'ios-book',
          children: [
            {
              name: 'menu3-1',
              icon: 'ios-add'
            },
            {
              name: 'menu3-2',
              icon: 'ios-add'
            }
          ]
        }
      ]
      // return this.$store.getters.menuList
    }
  }
}
</script>
<style lang="stylus">
.main
  .logo-con
    height: 64px
    padding: 10px
    img
      height: 44px
      width: auto
      display: block
      margin: 0 auto
  .header-con
    background: #fff
    padding: 0 20px
  .tag-nav-wrapper
    padding: 0
    height:40px
    background:#F0F0F0
    overflow: hidden
</style>
